<!-- 编辑线索  -->
<template>
  <glsx-dialog
    :show="showDialog"
    title="编辑线索"
    class="edit_page"
    @close="closeDialog()"
  >
    <div class="">
      <el-form
        ref="editForm"
        :model="editForm"
        :rules="editFormRules"
        size="small"
        :inline="false"
        class="edit_form"
        label-width="120px"
      >
        <el-form-item label="活动名称：">
          <el-select v-model="editForm.activityId" disabled>
            <el-option
              v-for="(item, index) in activiList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名：" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号：" prop="phone">
          <el-input v-model="editForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="牙齿问题：" prop="dentalProblems">
          <el-input v-model="editForm.dentalProblems" disabled></el-input>
          <!-- <el-select v-model="editForm.dentalProblems">
            <el-option
              v-for="(item, index) in questionList"
              :key="index"
              :label="item.itemLabel"
              :value="item.itemId"
            ></el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="想参与活动：" prop="intentProjects">
          <el-input v-model="editForm.intentProjects" disabled></el-input>
          <!-- <el-select v-model="editForm.intentProjects">
            <el-option
              v-for="(item, index) in projectList"
              :key="index"
              :label="item.itemLabel"
              :value="item.itemId"
            ></el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="所在城市：" prop="city">
          <city-select
            v-model="editForm.city"
            class="a_select"
            :multiple="false"
            @change="(e) => onChange(e, 'city')"
          ></city-select>
        </el-form-item>
        <el-form-item label="性别：" prop="gender">
          <el-radio-group v-model="editForm.gender" disabled>
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
            <el-radio label="未知">未知</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄：" prop="age">
          <el-input v-model.number="editForm.age" maxlength="2" disabled></el-input>
        </el-form-item>
        <el-form-item label="微信：" prop="wxAccount">
          <el-input v-model="editForm.wxAccount" disabled></el-input>
        </el-form-item>
        <el-form-item label="来源：" prop="channelSource">
          <user-source
            v-model="editForm.channelSource"
            :multiple="false"
          ></user-source>
        </el-form-item>
        <el-form-item label="广告代号：" prop="adSource">
          <adcode-select
            v-model="editForm.adSource"
            :multiple="false"
          ></adcode-select>
        </el-form-item>
        <el-form-item label="活动城市：" prop="activityCity">
          <city-select
            v-model="editForm.activityCity"
            class="a_select"
            :multiple="false"
            @change="(e) => onChange(e, 'activityCity')"
          ></city-select>
        </el-form-item>
        <el-form-item label="报名时间：" prop="enrollTime">
          <el-input v-model="editForm.enrollTime" readonly></el-input>
        </el-form-item>
        <el-form-item label="ip：">
          <el-input v-model="editForm.ip" readonly></el-input>
        </el-form-item>
        <el-form-item label="ip所在城市：">
          <el-input v-model="editForm.ipBelong" readonly></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer">
      <el-button
        type="primary"
        size="small"
        :loading="loading"
        @click="saveInfo()"
        >保存</el-button
      >
      <el-button type="default" size="small" @click="closeDialog()"
        >取消</el-button
      >
    </div>
  </glsx-dialog>
</template>
<script>
import {
  GET_CLUE_INFO,
  EDIT_CLUE_INFO,
  GET_ACTIVITY_OPTIONS,
  GET_ACTIVITY_QUESTIONNAIRES,
} from "@/http/clues";
import { deepClone, showToast } from "@/common/util";
export default {
  name: "EditClue",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [Number, String],
      default: "",
    },
  },
  components: {},
  watch: {
    value: {
      handler: function (n) {
        this.showDialog = n;
      },
      immediate: true,
    },
    id: {
      handler: function (n) {
        console.log(n);
        if (n) {
          this.getInfo(n);
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      showDialog: false,
      editForm: {},
      activiList: [],
      editFormRules: {
        // activityId: [
        //   { required: true, message: "请选择活动名称", trigger: "change" },
        // ],
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        // dentalProblems: [
        //   { required: true, message: "请输入牙齿问题", trigger: "blur" },
        // ],
        city: [
          { required: true, message: "请选择所在城市", trigger: "change" },
        ],
        // gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        // age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
        channelSource: [
          { required: true, message: "请选择来源", trigger: "change" },
        ],
        adSource: [
          { required: true, message: "请选择广告代号", trigger: "change" },
        ],
        activityCity: [
          { required: true, message: "请选择活动城市", trigger: "change" },
        ],
      },
      loading: false,
      questionList: [],
      projectList: [],
    };
  },
  created() {
    this.getAllActivity();
    //this.getList();
  },
  methods: {
    // 获取线索信息
    getInfo(id) {
      GET_CLUE_INFO({ id: id }).then((res) => {
        console.log(res);
        this.editForm = res.data || {};
      });
    },

    // 关闭弹框
    closeDialog() {
      this.showDialog = false;
      this.$emit("input", false);
    },

    // 获取所有的活动
    getAllActivity() {
      GET_ACTIVITY_OPTIONS().then((res) => {
        this.activiList = res.data || [];
      });
    },

    // 保存线索信息
    saveInfo() {
      let _this = this;
      _this.$refs.editForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        _this.loading = true;
        let _params = _this.getParams();
        delete _params.hasMainProjects;
        EDIT_CLUE_INFO(_params).then((res) => {
          _this.loading = false;
          if (res.code == 200) {
            showToast({
              message: "修改成功",
              type: "success",
            });
            _this.closeDialog();
            _this.$emit("change");
          }
        });
      });
    },

    // 获取牙齿问题、想参与的活动
    getList() {
      let _this = this;
      GET_ACTIVITY_QUESTIONNAIRES().then((res) => {
        console.log(res);
        let _list = res.data || [];
        let _m = _list.find(
          (k) => k.itemId == 3 && k.itemLabel == "您的牙齿问题"
        );
        let _n = _list.find(
          (k) => k.itemId == 8 && k.itemLabel == "您想参与的活动"
        );

        _this.questionList = _m ? _m.itemList : [];
        _this.projectList = _n ? _n.itemList : [];
      });
    },

    // 获取参数
    getParams() {
      let params = {};
      let m = deepClone(this.editForm);
      params.activityId = m.activityId;
      params.adSource = m.adSource;
      params.age = m.age;
      params.channelSource = m.channelSource;
      params.city = m.city;
      params.cityName = m.cityName;
      params.activityCity = m.activityCity;
      params.activityCityName = m.activityCityName;
      params.dentalProblems = m.dentalProblems;
      params.enrollTime = m.enrollTime;
      params.gender = m.gender;
      params.intentProjects = m.intentProjects;
      params.ip = m.ip;
      params.name = m.name;
      params.phone = m.phone;
      params.wxAccount = m.wxAccount;
      params.id = m.id;
      return params;
    },

    // 监听城市选择
    onChange(e, id) {
      let list = this.$store.state.cityList || [];
      let m = list.find((k) => k.code == e);
      this.$set(this.editForm, id, e);
      this.$set(this.editForm, id + "Name", m.name || "");
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/style/editClue.scss";
</style>